{% extends "base.html" %}

{% block title %}首页 - 交易监控系统{% endblock %}

{% block content %}
<div class="page-header">
    <h1>交易监控系统</h1>
</div>

<div class="card">
    <div class="card-header">
        <h2>系统概览</h2>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col">
                <div class="info-card">
                    <i class="fas fa-box"></i>
                    <h3>品种管理</h3>
                    <p>管理交易品种，设置保证金、止损止盈等参数</p>
                    <a href="/products" class="btn btn-primary">进入管理</a>
                </div>
            </div>
            <div class="col">
                <div class="info-card">
                    <i class="fas fa-cog"></i>
                    <h3>系统配置</h3>
                    <p>调整系统配置参数，控制交易行为</p>
                    <a href="/config" class="btn btn-secondary">查看配置</a>
                </div>
            </div>
            <div class="col">
                <div class="info-card">
                    <i class="fas fa-eye"></i>
                    <h3>监控中品种</h3>
                    <p>管理当前处于监控状态的交易品种</p>
                    <a href="/monitored_products" class="btn btn-primary">进入管理</a>
                </div>
            </div>
            <div class="col">
                <div class="info-card">
                    <i class="fas fa-chart-line"></i>
                    <h3>交易记录</h3>
                    <p>查询历史交易记录，分析交易表现</p>
                    <a href="/trade_records" class="btn btn-secondary">查看记录</a>
                </div>
            </div>
        </div>
    </div>
</div>


{% endblock %}

{% block extra_css %}
<style>
    .row {
        display: flex;
        flex-wrap: wrap;
        margin: -10px;
    }
    
    .col {
        flex: 1;
        min-width: 300px;
        padding: 10px;
    }
    
    .col-md-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
        padding: 10px;
    }
    
    .info-card {
        background-color: #f9f9f9;
        border-radius: 5px;
        padding: 20px;
        text-align: center;
        transition: all 0.3s;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .info-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    
    .info-card i {
        font-size: 2.5rem;
        color: var(--primary-color);
        margin-bottom: 15px;
    }
    
    .info-card h3 {
        font-size: 1.2rem;
        margin-bottom: 10px;
        color: var(--primary-color);
    }
    
    .info-card p {
        margin-bottom: 20px;
        color: #666;
    }
</style>
{% endblock %}

{% block extra_js %}
{% endblock %}